<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas</title>
	</head>
	<body>
		<canvas
			id="gradient"
			width="200"
			height="200"
			style="border:solid 1px black"
		></canvas>
		<canvas
			id="line"
			width="200"
			height="200"
			style="border:solid 1px black"
		></canvas>
		<canvas
			id="circle"
			width="200"
			height="200"
			style="border:solid 1px black"
		></canvas>
		<canvas
			id="text"
			width="200"
			height="200"
			style="border:solid 1px black"
		></canvas>
		<canvas
			id="shadow"
			width="200"
			height="200"
			style="border:solid 1px black"
		></canvas>
		<canvas
			id="image"
			width="1000"
			height="1000"
			style="border:solid 1px black"
		></canvas>
		<script>
			let area,context;
			area=document.getElementById('gradient');
			context=area.getContext('2d');
			let gradient=context.createLinearGradient(20,20,160,160);
			gradient.addColorStop(0,'red');
			gradient.addColorStop(0.5,'yellow');
			gradient.addColorStop(1,'green');
			context.fillStyle=gradient;
			context.fillRect(20,20,160,160);
			area=document.getElementById('line');
			context=area.getContext('2d');
			context.moveTo(100,50);
			context.lineTo(50,150);
			context.lineTo(150,150);
			context.lineTo(100,50);
			context.strokeStyle='red';
			context.stroke();
			area=document.getElementById('circle');
			context=area.getContext('2d');
			context.arc(100,100,50,0,2*Math.PI);
			context.strokeStyle='green';
			context.stroke();
			area=document.getElementById('text');
			context=area.getContext('2d');
			context.font='30pt Arial';
			context.fillStyle='blue';
			context.strokeStyle='orange';
			context.fillText('hello',60,120);
			context.strokeText('hello',60,120);
			area=document.getElementById('shadow');
			context=area.getContext('2d');
			context.shadowColor='grey';
			context.shadowOffsetX=10;
			context.shadowOffsetY=10;
			context.shadowBlur=5;
			context.fillStyle='red';
			context.fillRect(50,50,100,100);
			area=document.getElementById('image');
			context=area.getContext('2d');
			let image=new Image();
			image.src='https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';
			image.onload=function(){
				let pattern=context.createPattern(image,'repeat');
				context.fillStyle=pattern;
				context.fillRect(100,100,800,800);
			};
		</script>
	</body>
</html>
